<template>
	<view>
		<!--自定义导航栏-->
		<uniNavBar title='确认支付' left-text='关闭' fixed='true' status-bar='true' @clickLeft='goBack'></uniNavBar>
		<view class='pay-main'>
			<radio-group name="">
				<label for="">
					<view class="pay-item">
						<image class='pay-img' src='../../static/image/zfb.png' mode=""></image>
						<view>
							<view>支付宝支付</view>
							<view class='pay-txt'>推荐支付宝用户使用</view>
						</view>
						<label class="radio">
							<radio value="" color='#FF3333' /><text></text>
						</label>
					</view>
				</label>
				<label for="">
					<view class="pay-item">
						<image class='pay-img' src="../../static/image/wxf.png" mode=""></image>
						<view>
							<view>微信支付</view>
							<view class='pay-txt'>推荐微信用户使用</view>
						</view>
						<label class="radio">
							<radio value="" color='#FF3333' /><text></text>
						</label>
					</view>
				</label>
			</radio-group>
		</view>
		<!--去支付-->
		<view class='pay-foot'>
			<view class='total'>
				<text class="f-color">合计:</text>
				<text class='total-price' v-if="orderObj.unitPrice">¥{{unitPrice}}</text>
				<text class='total-price' v-else>¥{{totalCount.pprice}}</text>
			</view>
			<view class="go-pay" @tap="goPayment">去支付</view>
		</view>

	</view>
</template>

<script>
	import $http from '../../common/api/request.js'
	import uniNavBar from '@/components/uni/uni-nav-bar/uni-nav-bar.vue'
	import {
		mapState,
		mapActions,
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				orderObj: {},
				pageType: '',
				unitPrice: '',
				goodsName: []
			}
		},
		components: {
			uniNavBar
		},
		computed: {
			...mapState({
				orderNameList: state => state.order.orderNameList,
				orderNumber: state => state.order.orderNumber
			}),
			...mapGetters(['checkedAll', 'totalCount'])
		},
		onLoad(e) {
			if (e.shopObj) {
				this.orderObj = JSON.parse(e.shopObj)
				this.unitPrice = this.orderObj.unitPrice
				this.getOrderDetialData(this.orderObj)
			}
		},
		methods: {
			getOrderDetialData(data) {
				$http.request({
					url: '/getOrderDetialData',
					method: 'POST',
					header: {
						token: true
					},
					data: {
						orderId: data.order_id
					}
				}).then((res) => {
					res.forEach((item) => {
						this.goodsName.push(item.goods_name)
					})
				})

			},
			//点击关闭返回上一页
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 支付成功，跳转支付成功页面
			goPayment() {
				// 从订单出和直接立即购买时调用的跳转第三方支付接口
				if (this.orderObj.unitPrice) {
					$http.request({
						url: "/payment",
						method: "POST",
						header: {
							token: true
						},
						data: {
							orderId: this.orderObj.order_id,
							price: this.orderObj.unitPrice,
							list: Array.from(this.goodsName)
						}
					}).then((res) => {
						plus.runtime.openURL(res.paymentUrl);
						if (res.success) {
							this.goPaymentSuccess(this.orderObj.order_id)
						}
					})
				} else {
					// 从购物车订单过来的
					$http.request({
						url: "/payment",
						method: "POST",
						header: {
							token: true
						},
						data: {
							orderId: this.orderNumber,
							price: this.totalCount.pprice,
							list: this.orderNameList
						}
					}).then((res) => {
						plus.runtime.openURL(res.paymentUrl);
						if (res.success) {
							this.goPaymentSuccess(this.orderNumber)
						}
					})
				}
			},
			// 跳转支付成功页面
			goPaymentSuccess(orderId) {
				$http.request({
					url: '/submitOrder',
					method: 'POST',
					header: {
						token: true
					},
					data: {
						orderId: orderId,
					}
				}).then((res) => {
					uni.navigateTo({
						url: "/pages/payment-success/payment-success"
					})
				})
			}
		}
	}
</script>

<style scoped>
	.pay-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		border-bottom: 2rpx solid #CCCCCC;
	}

	.pay-img {
		width: 100rpx;
		height: 100rpx;
	}

	.pay-txt {
		color: #CCCCCC;
	}

	.pay-foot {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.total {
		padding-left: 100rpx;
		flex: 1;
		background-color: #000000;
		line-height: 100rpx;
	}

	.go-pay {
		color: #FFFFFF;
		background-color: #49BDFB;
		line-height: 100rpx;
		text-align: center;
		width: 220rpx;
	}

	.total-price {
		color: #FFFFFF;
	}
</style>